<template>
	<view>
		<view class="cu-list menu sw-carlist">
			<sw-loading v-if="carList.length == 0" type="4"></sw-loading>
			<block v-else>
				<view class="cu-item card-menu margin-top" v-for="(item,index) in carList" :key="index">
					<view class="sw-before text-blue text-center" @click.end="changeDirec(index)">
						<view class="cuIcon-order"></view>
						<view>换向</view>
					</view>
					<view class="sw-content" @click.end="viewLine(item['id'],item['name'],item['site'])">
						<view class="text-bold text-black sw-title">{{item.name}}</view>
						<view class="sw-desc">开往 {{item.carInfo[item.index].end_stop}} 方向</view>
						<view class="sw-desc">{{item.site}} | 约 {{Math.floor(item.distance)}} 米</view>
					</view>
					<view class="sw-after text-blue">
						<view class="station">9</view>站
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import swLoading from '@/components/sw-loading/sw-loading.vue'
	export default {
		name:"sw-car-list",
		props:{
			carList: Array
		},
		data() {
			return {
				
			};
		},
		components:{
			swLoading
		},
		methods:{
			viewLine(id,line_name,site_name){
				console.log(999999999999999)
				uni.navigateTo({
					url:'/pages/home/line?id='+id+'&site_name='+site_name+'&line_name='+line_name
				})
			},
			changeDirec(index){
				let item_index = this.carList[index].index
				this.carList[index].index = (item_index == 0?1:0)
			},
		}
	}
</script>

<style>
.sw-carlist{
		margin-bottom: 20rpx;
	}
	.sw-carlist.cu-list{
		margin-top: 0 !important;
	}
	.sw-carlist .cu-item{
		margin: 20rpx;
		padding: 35rpx;
		border-radius: 10rpx;
	}
	.sw-content{
		line-height: 1.5;
		margin: 20rpx auto;
	}
	.sw-content .sw-title{
		margin-bottom: 20rpx;
		font-size: 32rpx;
	}
	.sw-content .sw-desc{
		font-weight: 400;
	}
	.sw-after{
		display: flex;
		line-height: 40rpx;
	}
	.sw-after .station{
		font-size: 40rpx;
	}
	.sw-bg-white-o{
		background-color: rgba(255,255,255,.3);
		border-radius: 10rpx;
	}
</style>
